import React, { useState } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from "../../components/Header/Header"
import { reqregister } from '../../http/api'

const Register = (props) => {
  const [user, setUser] = useState({
    phone:"",
    nickname:"",
    password:""
  })

  const doRegister = () =>{
    reqregister(user).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:res.data.msg
        })
        props.history.push("/login")
      }
    })
  }
  return (
    <div>
      <Header title="注册"></Header>
      <h2>{JSON.stringify(user)}</h2>
      <Form layout='horizontal'>
        <Form.Item label='手机号' name='userphone'>
          <Input placeholder='请输入手机号' clearable onChange={(v) => setUser({...user,phone:v})} />
        </Form.Item>
        <Form.Item label='用户名' name='nickname'>
          <Input placeholder='请输入用户名' clearable onChange={(v) => setUser({...user,nickname:v})} />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable type='password' onChange={(v) => setUser({...user,password:v})} />
        </Form.Item>
      </Form>
      <p style={{ textAlign: 'center' }}>
        <Button color='warning' size='middle' onClick={() => doRegister()}>注册</Button>
      </p>
    </div>
  )
}

export default Register